<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>视频瀑布流</title>
  <style>
    #container {
      column-count: 3;
      column-gap: 10px;
      margin: 10px;
    }
    .video-item {
      display: inline-block;
      margin-bottom: 10px;
      width: 100%;
      max-width: 300px;
    }
    .video-img {
      display: block;
      width: 100%;
    }
    .video-title {
      font-size: 16px;
      margin-top: 5px;
    }
  </style>
</head>
<body>
  <div id="container"></div>

  <script>
    const videos = [
      { title: '视频1', thumbnail: '  https://wallpaper-static.cheetahfun.com/wallpaper/sites/beauty/pic1.jpg', url: 'https://api.qqsuu.cn/api/dm-xjj' },
      { title: '视频2', thumbnail: '  https://wallpaper-static.cheetahfun.com/wallpaper/sites/beauty/pic1.jpg', url: 'https://api.qqsuu.cn/api/dm-xjj' },
      { title: '视频3', thumbnail: '  https://wallpaper-static.cheetahfun.com/wallpaper/sites/beauty/pic1.jpg', url: 'https://www.youtube.com/embed/dQw4w9WgXcQ' },
      { title: '视频4', thumbnail: '  https://wallpaper-static.cheetahfun.com/wallpaper/sites/beauty/pic1.jpg', url: 'https://api.qqsuu.cn/api/dm-xjj' },
      { title: '视频5', thumbnail: '  https://wallpaper-static.cheetahfun.com/wallpaper/sites/beauty/pic1.jpg', url: 'https://api.qqsuu.cn/api/dm-xjj' },
      { title: '视频6', thumbnail: '  https://wallpaper-static.cheetahfun.com/wallpaper/sites/beauty/pic1.jpg', url: 'https://api.qqsuu.cn/api/dm-xjj' },
      { title: '视频7', thumbnail: '  https://wallpaper-static.cheetahfun.com/wallpaper/sites/beauty/pic1.jpg', url: 'https://api.qqsuu.cn/api/dm-xjj' },
      { title: '视频8', thumbnail: '  https://wallpaper-static.cheetahfun.com/wallpaper/sites/beauty/pic1.jpg', url: 'https://api.qqsuu.cn/api/dm-xjj' },
      { title: '视频9', thumbnail: '  https://wallpaper-static.cheetahfun.com/wallpaper/sites/beauty/pic1.jpg', url: 'https://api.qqsuu.cn/api/dm-xjj' },
      { title: '视频10', thumbnail: ' https://wallpaper-static.cheetahfun.com/wallpaper/sites/beauty/pic1.jpg', url: 'https://api.qqsuu.cn/api/dm-xjj' }
    ];

    const container = document.getElementById('container');

    videos.forEach(video => {
      const div = document.createElement('div');
      div.className = 'video-item';

      const img = document.createElement('img');
      img.src = video.thumbnail;
      img.className = 'video-img';

      const title = document.createElement('div');
      title.innerHTML = video.title;
      title.className = 'video-title';

      const iframe = document.createElement('iframe');
      iframe.src = video.url;
      iframe.width = '100%';
      iframe.height = '315';
      iframe.frameBorder = '';

      div.appendChild(img);
      div.appendChild(title);
      div.appendChild(iframe);

      container.appendChild(div);
    });
  </script>
</body>
</html>